// JavaScript Document
/* PROJECT : Aplay Menues
*	@require MyClass.js
*	@autor: Mauricio Sanchez
*	@create: 25-09-2009
*	Barra de progreso
*/

ProgressBar = new MyClass({
	CLASS_NAME: "ProgressBar",	
	 
	 /**  
     * Property: height
	 * 	 Altura del TabMenu.
     * {String}
     */
	 heightBar: '5px',
	 heightText: '15px',
	 
	 /**  
     * Property: width
	 * 	 Ancho del TabMenu.
     * {String}
     */
	 width: '500px',
	 
	 /**  
     * Property: className
	 * 	 Clase del ProgressBar.
     * {String}
     */
	 className: 'progressBar',
	 
	 /**  
     * Property: container
	 * 	 Elemento DIV donde se imprime el menu.
     * {DOMELEMENT}
     */
	 container: null,	
	 
	 /**  
     * Property: large
	 * 	 Largo total, este es el numer de llamadas a la function progress que deben hacerse para llenar la barra.
     * {Integer}
     */
	 large: 100,
	 
	 /**  
     * Propertyes: DOMELEMENTS QUE FORMAN LA PROGRESS BAR
     * {DOMELEMENT}
     */
	 _progressBar: null,
	 _contentBar: null,
	 _bar: null,
	 _textBar: null,
	 
	 /**  
     * Propertyes: Propiedades locales para mantener el porcentaje de progreso
     */
	 _widthActual: 0, 
	 _widthUnidad: 0,
	 
	/** 
     * Method: init
     */
	init: function(opciones){
		for (var key in opciones) {
			this[key] = opciones[key]; 
		}
		
		this._progressBar = document.createElement('div');
		this._progressBar.className = 'progressBar';
		with (this._progressBar.style){
			width = this.width;
		}
		//create Progress Bar
		this._contentBar = document.createElement('div');
		this._contentBar.className = 'contentBar';
		with (this._contentBar.style){
			width = this.width;
			height = this.heightBar;
		}
		this._progressBar.appendChild(this._contentBar);
		//create Bar
		this._Bar = document.createElement('div');
		this._Bar.className = 'bar';
		with (this._Bar.style){
			width = this._widthActual + 'px';
			height = this.heightBar;
		}
		this._contentBar.appendChild(this._Bar);
		//text Bar
		this._textBar = document.createElement('div');
		this._textBar.className = 'textBar';
		with (this._textBar.style){
			width = this.width;
			height = this.heightText;
		}
		this._progressBar.appendChild(this._textBar);
		
		//calcular el width por unidad de progreso
		this._widthUnidad = Math.round(parseInt(this.width)/this.large);

		if (this.container){
			if (typeof this.container == 'string')
				this.container = document.getElementById(this.container);
			this.container.appendChild(this._progressBar);	
		}
	},
	
	/** 
     * Method: progress
     * 	 Hace progresar en una unidad la barra de progreso.
     */
	progress: function(){
		this._widthActual += this._widthUnidad;
		if (this._widthActual <= parseInt(this.width) )
			this._Bar.style.width = this._widthActual + 'px';
		else{
			this._Bar.style.width = '100%';
		}
		
	},
	
	/** 
     * Method: setText
     * 	 Coloca un mensaje de texto bajo la barra de progreso.
	 * Params: 
	 *   text: String
     */
	setText: function(text){
		this._textBar.innerHTML = text;
	},
	
	/** 
     * Method: reset
     * 	 Resetea todos los valores al inicio.
	 * Params:
	 *   [newLarge] - {Integer} : Nuevo valor para el largo
     */
	reset: function(newLarge){
		this._widthActual = 0;
		this._Bar.style.width = '0px';
		this._textBar.innerHTML = '';
		if (newLarge){
			this.large = parseInt(newLarge);
			this._widthUnidad = Math.round(parseInt(this.width)/this.large);
		}
	}
	
});